<template>
  <div class="icon-boxs" v-if="props.isActive">
    <img v-if="store.styleInfo.colorType == 1" src="@/assets/templateImg/template5Btn1.png" alt="" />
    <img v-if="store.styleInfo.colorType == 2" src="@/assets/templateImg/template5Btn2.png" alt="" />
    <img v-if="store.styleInfo.colorType == 3" src="@/assets/templateImg/template5Btn3.png" alt="" />
  </div>
  <div class="icon-boxs" v-else>
    <img v-if="store.styleInfo.colorType == 1" src="@/assets/templateImg/templatenull1.png" alt="" />
    <img v-if="store.styleInfo.colorType == 2" src="@/assets/templateImg/templatenull2.png" alt="" />
    <img v-if="store.styleInfo.colorType == 3" src="@/assets/templateImg/templatenull3.png" alt="" />
  </div>
</template>

<script setup lang="ts">
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';
const store = useProjectStore();

const props = defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },

  // 数据
});
</script>

<style lang="less" scoped>
.icon-boxs {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
